<template>
  <div class="description-list" :class="{'description-list-small': size === 'small','description-list-large': size === 'large','vertical': layout === 'vertical'}
  ">
    <div class="title" v-if="title">{{ title }}</div>
    <Row :gutter="gutter">
      <Col :span="24/col" v-for="(item, index) in descriptionList" :key="index">
        <div class="term" v-if="item.term">{{ item.term }}</div>
        <div class="detail">
          <slot>{{ item.detail }}</slot>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'DescriptionList',
  props: {
    layout: {
      type: String,
      default: 'horizontal'
    },
    col: {
      type: Number,
      default: 3,
      validator: function(value) {
        return value <= 4 && value > 0
      }
    },
    title: {
      type: String
    },
    gutter: {
      type: Number,
      default: 32
    },
    size: {
      type: String,
      default: 'large'
    },
    descriptionList: {
      type: Array
    }
  }
}

</script>
<style>
.description-list .title {
  font-size: 14px;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  margin-bottom: 16px
}

.description-list .term {
  line-height: 22px;
  padding-bottom: 16px;
  margin-right: 8px;
  color: rgba(0, 0, 0, .85);
  white-space: nowrap;
  display: table-cell
}

.description-list .term:after {
  content: ":";
  margin: 0 8px 0 2px;
  position: relative;
  top: -.5px
}

.description-list .detail {
  line-height: 22px;
  width: 100%;
  padding-bottom: 16px;
  color: rgba(0, 0, 0, .65);
  display: table-cell
}

.description-list.vertical .term {
  padding-bottom: 8px;
  display: block
}

.description-list-small>.title {
  font-size: 14px;
  margin-bottom: 12px;
  color: rgba(0, 0, 0, .65)
}

.description-list-small .detail,
.description-list-small .term {
  padding-bottom: 8px
}

.description-list-large>.title {
  font-size: 16px
}

</style>
